﻿<!--New items-->
<div ng-hide="isInitialized">
    <p>Loading, please wait</p>
</div>
<div ng-show="isInitialized">
    <div ng-show="isAuthenticated">
        <p><strong>Unpurchased</strong></p>
        <div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Type</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Total</th>
                        <th>Purchase?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in result = (groceryList | filter:{datePurchased:'null'})">
                        <td>{{item.itemName}}</td>
                        <td>{{item.typeName}}</td>
                        <td>{{item.quantity}}</td>
                        <td>{{item.itemPrice | currency}}</td>
                        <td>{{(item.quantity * item.itemPrice) | currency}}</td>
                        <td>
                            <input type="checkbox" ng-click="purchaseItem(item.groceryItemId)"
                                   ng-disabled="isLoading" />
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><strong>Totals</strong></td>
                        <td></td>
                        <td><strong>{{result | sumOfValue:'quantity'}}</strong></td>
                        <td><strong>{{result | sumOfValue:'itemPrice' | currency}}</strong></td>
                        <td><strong>Grand Total: {{result | totalSumPriceQty:'quantity':'itemPrice' | currency}}</strong></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!--Purchased-->
        <p><strong>Purchased</strong></p>
        <div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Type</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Total</th>
                        <th>Purchased Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in result = (groceryList | filter:{datePurchased:'!null'})">
                        <td>{{item.itemName}}</td>
                        <td>{{item.typeName}}</td>
                        <td>{{item.quantity}}</td>
                        <td>{{item.itemPrice | currency}}</td>
                        <td>{{(item.quantity * item.itemPrice) | currency}}</td>
                        <td><span am-time-ago="item.datePurchased" am-preprocess="utc"></span></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><strong>Totals</strong></td>
                        <td></td>
                        <td><strong>{{result | sumOfValue:'quantity'}}</strong></td>
                        <td><strong>{{result | sumOfValue:'itemPrice' | currency}}</strong></td>
                        <td><strong>Grand Total: {{result | totalSumPriceQty:'quantity':'itemPrice' | currency}}</strong></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div ng-hide="isAuthenticated">
        <p>Sorry, you're not authorized to view this page</p>
    </div>
</div>